<template>
  <div class="fault-analysis-card">
    <div class="card-content">
      <!-- 故障原因卡片 -->
      <div class="info-card full-width" :class="{ 'filled': formData.faultCause }">
        <div class="fill-indicator"></div>
        <div class="card-label">
          故障原因
          <el-tooltip content="分析并记录导致故障的根本原因，包括技术原因、操作原因、环境因素等。支持Markdown格式。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-content-area">
          <MarkdownRenderer
            v-model="formData.faultCause"
            :editable="true"
            :collapsible="true"
            :maxHeight="80"
            :showLabel="false"
            placeholder="分析故障的根本原因，支持Markdown语法..."
            :rows="4"
          />
        </div>
      </div>

      <!-- 解决方案卡片 -->
      <div class="info-card full-width" :class="{ 'filled': formData.solution }">
        <div class="fill-indicator"></div>
        <div class="card-label">
          解决方案
          <el-tooltip content="制定具体的故障解决方案，包括维修步骤、所需工具、预计时间等。支持Markdown格式。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-content-area">
          <MarkdownRenderer
            v-model="formData.solution"
            :editable="true"
            :collapsible="true"
            :maxHeight="80"
            :showLabel="false"
            placeholder="制定具体的解决方案，支持Markdown语法..."
            :rows="4"
          />
        </div>
      </div>

      <!-- 预防措施卡片 -->
      <div class="info-card full-width" :class="{ 'filled': formData.preventiveMeasures }">
        <div class="fill-indicator"></div>
        <div class="card-label">
          预防措施
          <el-tooltip content="制定预防类似故障再次发生的措施，包括定期检查、维护计划、操作规范等。支持Markdown格式。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-content-area">
          <MarkdownRenderer
            v-model="formData.preventiveMeasures"
            :editable="true"
            :collapsible="true"
            :maxHeight="80"
            :showLabel="false"
            placeholder="制定预防措施，支持Markdown语法..."
            :rows="4"
          />
        </div>
      </div>

      <!-- 影响评估卡片 -->
      <div class="info-card full-width" :class="{ 'filled': formData.impactAssessment }">
        <div class="fill-indicator"></div>
        <div class="card-label">
          影响评估
          <el-tooltip content="评估故障对生产、质量、安全等方面的影响程度和范围，包括经济损失、时间影响等。支持Markdown格式。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-content-area">
          <MarkdownRenderer
            v-model="formData.impactAssessment"
            :editable="true"
            :collapsible="true"
            :maxHeight="80"
            :showLabel="false"
            placeholder="评估故障影响，支持Markdown语法..."
            :rows="4"
          />
        </div>
      </div>
    </div>

    <!-- 故障原因弹窗已改为内联Markdown编辑器 -->

    <!-- 解决方案弹窗已改为内联Markdown编辑器 -->

    <!-- 预防措施弹窗已改为内联Markdown编辑器 -->

    <!-- 影响评估弹窗已改为内联Markdown编辑器 -->
  </div>
</template>

<script>
export default {
  name: 'FaultAnalysisForm',
  props: {
    formData: {
      type: Object,
      required: true
    },
    compact: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 所有弹窗相关数据已移除，改为内联Markdown编辑器
    }
  },
  methods: {
    validate() {
      // 简单验证必填字段
      if (!this.formData.faultCause) {
        this.$message.error('请填写故障原因');
        return Promise.reject();
      }
      if (!this.formData.solution) {
        this.$message.error('请填写解决方案');
        return Promise.reject();
      }
      return Promise.resolve();
    },

    // 所有弹窗打开方法已移除，改为内联Markdown编辑器

    // 所有保存方法已移除，改为内联Markdown编辑器自动保存
  }
}
</script>

<style scoped>
/* 故障分析卡片容器 */
.fault-analysis-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}



/* 卡片内容 */
.card-content {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 信息卡片 */
.info-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 16px 16px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 填写状态指示器 */
.fill-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #e2e8f0;
  border-radius: 12px 0 0 12px;
  transition: all 0.3s ease;
}

.info-card.filled .fill-indicator {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}



.card-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-icon {
  font-size: 14px;
  color: #9ca3af;
  cursor: help;
  transition: color 0.2s ease;
}

.help-icon:hover {
  color: #6b7280;
}

.card-value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
  flex: 1;
}

.card-placeholder {
  font-size: 14px;
  color: #94a3b8;
  font-style: italic;
  flex: 1;
}

.card-content-area {
  margin-top: 8px;
}



/* 弹窗样式 */
.clean-textarea >>> .el-textarea__inner {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
  transition: border-color 0.2s ease;
}

.clean-textarea >>> .el-textarea__inner:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 弹窗z-index修复 */
.el-dialog__wrapper {
  z-index: 3000 !important;
}

.el-overlay {
  z-index: 2999 !important;
}

/* 下拉选择器z-index修复 */
.el-select-dropdown {
  z-index: 3001 !important;
}

.el-popper {
  z-index: 3001 !important;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.dialog-footer .el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .card-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
</style>
